import React from "react";

import logo from "./logo192.png";
import { removeToken } from "../../utils/auth";
import { adminRoutes } from "../../routes";
import "./frame.css";

import { Layout, Menu, Dropdown, Avatar, message } from "antd";
import { withRouter } from "react-router";
import { DownOutlined } from "@ant-design/icons";
const { Header, Content, Sider } = Layout;

const routes = adminRoutes.filter((route) => route.isShow);

function Index(props) {
  const options = (item) => {
    if (item.key === "logout") {
      props.history.push("/login");
      removeToken();
    } else {
      message.info(item.key);
    }
  };
  const popMenu = (
    <Menu onClick={options}>
      <Menu.Item key="noti">通知中心</Menu.Item>
      <Menu.Item key="setting">设置</Menu.Item>
      <Menu.Divider />
      <Menu.Item key="logout">退出</Menu.Item>
    </Menu>
  );

  return (
    <Layout>
      <Header className="header" style={{ background: "#428bca" }}>
        <div className="logo">
          <img style={{ height: "64px" }} src={logo} alt="logo" />
        </div>
        <Dropdown overlay={popMenu}>
          <span>
            <Avatar>U</Avatar>
            <span style={{ color: "#FFF" }}>超级管理员</span>
            <DownOutlined />
          </span>
        </Dropdown>
      </Header>
      <Layout>
        <Sider width={200} className="site-layout-background">
          <Menu
            mode="inline"
            defaultSelectedKeys={["1"]}
            defaultOpenKeys={["sub1"]}
            style={{ height: "100%", borderRight: 0 }}
          >
            {routes.map((route) => (
              <Menu.Item
                key={route.path}
                onClick={(p) => props.history.push(p.key)}
              >
                {route.title}
              </Menu.Item>
            ))}
          </Menu>
        </Sider>
        <Layout style={{ padding: "16px" }}>
          {/* <Breadcrumb style={{ margin: "16px 0" }}>
            <Breadcrumb.Item>Home</Breadcrumb.Item>
            <Breadcrumb.Item>List</Breadcrumb.Item>
            <Breadcrumb.Item>App</Breadcrumb.Item>
          </Breadcrumb> */}
          <Content
            className="site-layout-background"
            style={{
              padding: 24,
              margin: 0,
              minHeight: 280,
            }}
          >
            {props.children}
          </Content>
        </Layout>
      </Layout>
    </Layout>
  );
}

export default withRouter(Index);
